<template>
  <view class="particulars">
    <view class="particulars_list">
      <!-- 头部 -->
      <view class="particulars.pics">
        <!-- 轮播图部分 -->
        <swiper
          :circular="true"
          indicator-active-color="#EA4350"
          :indicator-dots="true"
          :autoplay="true"
          :interval="3000"
        >
          <swiper-item
            @click="headlerImg(index)"
            v-for="(item, index) in particulars.pics"
            :key="index"
          >
            <image :src="item.pics_mid_url" mode="widthFix"></image>
          </swiper-item>
        </swiper>
        <view class="price">
          <view class="price_left">￥{{ particulars.goods_price }}</view>
          <view class="price_right">
            <button
              open-type="share"
              class="iconfont icon-zhuanfa share_icon"
            ></button>
            <view
              @click="collect"
              :class="
                isFav
                  ? 'iconfont icon-shoucang collect_icon active'
                  : 'iconfont icon-shoucang1 collect_icon active'
              "
            ></view>
          </view>
        </view>
        <view class="title">{{ particulars.goods_name }}</view>
      </view>
      <!-- 底部 -->
      <view class="particulars.introduce"
        ><view class="content" v-html="particulars.goods_introduce"></view
      ></view>
    </view>
    <view class="base">
      <view class="item_icon">
        <button open-type="contact" class="btn" type="default"></button>
        <view class="iconfont icon-tongyong-lianxikefutubiao"></view>
        <view class="text">联系客服</view>
      </view>
      <navigator
        open-type="switchTab"
        url="../cart/index"
        class="item_icon gwc"
      >
        <view class="iconfont icon-gouwuche"></view>
        <view class="text">购物车</view>
      </navigator>
      <view class="text"
        ><view class="addcart" @click="addcart">加入购物车</view></view
      >
      <view class="text"
        ><view class="purchase" @click="gwc">立即购买</view></view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      particulars: {}, // 请求回来的数据
      isFav: false, // 用来记录当前收藏的选中状态
    };
  },
  async onLoad(e) {
    const [error, res] = await uni.request({
      url: "https://api-hmugo-web.itheima.net/api/public/v1/goods/detail",
      data: { goods_id: e.goods_id },
    });
    this.particulars = res.data.message;

    // 处理收藏
    const [err, data] = await uni.getStorage({
      key: "add",
    });
    // console.log(data)  如果有数据就会得到一个数组 里面储存有收藏的id
    // 使用 findIndex 查找当前的id
    if (data) {
      const index = data.data.findIndex((v) => {
        // e.id 表示当前进入页面就获取到的id
        return v == e.goods_id;
      });
      console.log(index);
      // 判断 如果有值就添加样式 改图标
      if (index !== -1) {
        this.isFav = true;
      }
    }
  },
  // 点击右上角的分享
  onShareAppMessage() {
    return {
      // 转发标题
      title: "小鲁班",
      // 当用户点击页面的时候进入这个页面
      path: "/pages/index/index",
    };
  },
  methods: {
    // 预览图片
    headlerImg(index) {
      console.log(index);
      const current = index;
      const urls = this.particulars.pics.map((v) => {
        return v.pics_mid_url;
      });
      uni.previewImage({
        // 当前显示图片的连接、索引值 不填或者无效则为urls 的第一张
        current,
        // 需要预览的图片或列表
        urls,
      });
    },
    // 点击加入购物车
    async addcart() {
      const [error, res] = await uni.getStorage({
        key: "cart",
      });
      let cart = [];
      if (res) {
        cart = res.data;
      }
      const index = cart.find((item) => {
        return item.goods_id == this.particulars.goods_id;
      });
      console.log(index);
      if (index) {
        index.num++;
      } else {
        // 添加这个是因为要在购物车页面需要监听选中的状态 所以默认給的是选中状态
        // this.particulars.checked = true;
        this.particulars.num = 1;
        cart.push(this.particulars);
      }
      // 提示用户
      uni.showToast({
        title: "成功加入购物车",
        icon: "none",
        mask: true,
      });
      return uni.setStorage({
        key: "cart",
        data: cart,
      });
    },
    // 点击收藏
    async collect() {
      // 实现本地储存的步骤
      // 2 取出本地储存的值 判断当前的商品是否存在 本地储存返回的是一个 Promise
      const [error, res] = await uni.getStorage({
        key: "add",
      });
      // 定义一个新的数组 开始储存一个新的数组进去
      let favList = [];
      // 判断 如果有数据就把数据赋值给新的数组
      if (res) {
        favList = res.data;
      }
      // 判断当前的数据是否收藏
      // 如果是收藏点击就是取消 否则就是添加
      // 查找当前的favList 数组 需要遍历拿到每一个数据的索引
      const index = favList.findIndex((v) => {
        return v == this.particulars.goods_id;
      });
      if (index != -1) {
        favList.splice(index, 1);
        this.isFav = false;
      } else {
        this.isFav = true;
        favList.push(this.particulars.goods_id);
      }
      // 1 先把要储存的数据储存到本地  使用 uni.setStorage 首先
      await uni.setStorage({
        key: "add",
        data: favList,
      });
    },
    // 点击购物车
    gwc() {
      this.addcart();
      // 跳转到页面
      uni.switchTab({
        url: "../cart/index",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.base {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 94rpx;
  width: 750rpx;
  background-color: #fff;
  border-top: 1rpx solid #ccc;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 30rpx 0 50rpx;
  .gwc {
    margin: 0 20rpx;
  }
  .item_icon {
    flex: 1;
    text-align: center;
    font-size: 20rpx;
    position: replace;
    .icon-tongyong-lianxikefutubiao,
    .icon-gouwuche {
      font-size: 40rpx;
    }
    .btn {
      position: absolute;
      left: 50rpx;
      bottom: 0;
      width: 104rpx;
      height: 94rpx;
      opacity: 0;
    }
  }
  .text {
    flex: 2;
    text-align: center;
    font-size: 26rpx;
  }
  .purchase {
    background: #ea4350;
    height: 60rpx;
    color: #fff;
    line-height: 60rpx;
    border-radius: 30rpx;
    margin-left: 11rpx;
  }
  .addcart {
    background: #fcaa23;
    height: 60rpx;
    color: #fff;
    line-height: 60rpx;
    border-radius: 30rpx;
    margin-right: 11rpx;
  }
}
.particulars {
  .particulars_list {
    .particulars.pics {
      padding: 0 33rpx;
      swiper {
        height: 497rpx;
        padding: 0 127rpx;
        swiper-item {
          height: 497rpx;
          width: 497rpx;
          image {
            height: 497rpx;
            width: 497rpx;
          }
        }
      }
      .price {
        height: 88rpx;
        display: flex;
        justify-content: space-between;

        .price_left {
          color: #ea4350;
        }
        .price_right {
          display: flex;
          align-items: center;
          button::after {
            border: none;
          }
          .iconfont {
            background: #fff;
          }
          .active {
            color: #fcaa23;
          }
          .collect_icon,
          .share_icon {
            font-size: 30rpx;
          }
        }
      }
      .title {
        height: 84rpx;
        font-size: 30rpx;
        color: #434343;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
    .particulars.introduce {
      .content {
        padding: 0 17rpx;
      }
    }
  }
}
</style>
